<template>
  <el-tabs type="border-card">
    <el-tab-pane label="分类信息">
      <el-form
        ref="form"
        label-width="180px"
        :model="categoryForm.formData"
        :rules="categoryForm.rules"
        style="overflow-x: auto"
      >
        <el-form-item label="名称" prop="name">
          <el-input
            style="width: 220px"
            placeholder="名称"
            v-model.trim="categoryForm.formData.name"
            maxlength="50"
            show-word-limit
          ></el-input>
        </el-form-item>

        <el-form-item label="备注" prop="memo">
          <el-input
            type="textarea"
            style="width: 400px"
            placeholder="请输入备注"
            :autosize="{ minRows: 4, maxRows: 10 }"
            v-model="categoryForm.formData.memo"
            maxlength="512"
            show-word-limit
          />
        </el-form-item>

        <el-form-item>
          <el-button style="margin-right: 100px" @click="gotoList" v-waves
            >返回</el-button
          >
          <el-button
            type="primary"
            :loading="categoryForm.loading"
            @click="onSubmit"
            v-waves
            >{{ this.categoryForm.loading ? "提交中" : "保存" }}</el-button
          >
        </el-form-item>
      </el-form>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import categoryAPI from '@/api/goodsCategory'
import { mapGetters } from 'vuex'
export default {
  props: ['id'],
  name: 'info',
  data () {
    return {
      total: 0,
      rows: [],
      categoryForm: {
        formData: {
          id: null,
          name: null,
          memo: null
        },
        loading: false,
        rules: {
          name: [{ required: true, message: '请输入名称', trigger: 'blur' }]
        }
      }
    }
  },
  async created () {
    if (this.isEditMode) {
      const res = await categoryAPI.getById(this.id)
      this.categoryForm.formData = JSON.parse(JSON.stringify(res.data))
    }
  },
  computed: {
    ...mapGetters(['token']),
    isEditMode () {
      return this.id && this.id > 0
    }
  },
  methods: {
    /**
     * 搜索条件变更处理
     */
    handleFilter () {
      this.$refs.table.changeCondition()
    },
    /**
     * 分页信息变动事件处理
     * @param  {Object} pageInfo 分页信息
     */
    handlePageInfoChange (pageInfo) {
      this.getLogList(pageInfo)
    },
    gotoList () {
      this.$router.pushTo(this.$router.routesConfig.categoryList)
    },
    onSubmit () {
      this.$refs.form.validate((valid) => {
        if (!valid) {
          return false
        }
        this.categoryForm.loading = true
        if (this.id) {
          categoryAPI
            .update(this.categoryForm.formData)
            .then(() => {
              this.categoryForm.loading = false
              this.gotoList()
            })
            .catch(() => (this.categoryForm.loading = false))
        } else {
          categoryAPI
            .insert(this.categoryForm.formData)
            .then(() => {
              this.categoryForm.loading = false
              this.$message.success('添加成功')
              this.gotoList()
            })
            .catch(() => (this.categoryForm.loading = false))
        }
      })
    }
  }
}
</script>
